<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
    <link rel='stylesheet' href='/stylesheets/common.css' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台</title>
    <style>
        .container {
            width: 100vw;
            height: 100vh;
            background-color: #15151d;
            overflow: hidden;
        }

        .main {
            padding: 20px 30px;
            overflow: hidden;
        }

        .select {
            display: flex;
            justify-content: space-between;
            padding: 20px 30px;
            background: #1b1c21;
            border-radius: 24px;
        }

        .select form {
            display: flex;
        }

        .select form>div {
            margin: 0;
        }

        .select select {
            padding: 0 20px;
            width: 350px;
            height: 40px;
            color: #999999;
            background: #fff;
            border-radius: 12px;
        }

        .select .search {
            display: flex;
            width: 560px;
            height: 40px;
            border-radius: 12px;
            overflow: hidden;
            margin-left: 15px;
        }

        .select .search input {
            flex: 1;
            padding: 10px;
        }

        .select .search .search-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 45px;
            height: 40px;
            background-color: #067bfb;
        }

        .select .search .search-btn img {
            width: 25px;
            height: 25px;
        }

        .select button {
            width: 70px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            border-radius: 12px;
            background-color: #067bfb;
        }

        .content {
            margin-top: 30px;
            background: #1b1c21;
            border-radius: 24px;
        }

        .table {
            width: 100%;
            color: #fff;
            text-align: center;
        }

        .table thead tr {
            height: 64px;
        }

        .table th {
            text-align: center;
        }

        .table tbody tr td {
            line-height: 48px;
        }

        .dialog {
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
            background: #000;
            opacity: .5;
        }

        .dialog-warp {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 999;
            padding: 20px;
            width: 460px;
            margin-left: -120px;
            background: #fff;
            border-radius: 24px;
            transform: translate(-50%, -50%);
        }

        .dialog-header {
            position: relative;

        }

        .dialog-header>div {
            position: absolute;
            right: 0;
            top: 0;

        }

        form>div {
            margin: 20px 0;
        }

        .dialog-footer {
            text-align: right;
        }

        .dialog-footer button,
        .dialog-footer span {
            padding: 6px 10px;
            color: #fff;
            background: #067bfb;
            cursor: pointer;
        }

        .isDialog {
            display: none;
        }

        .page {
            width: 100%;
            padding: 20px;
            color: #fff;
            border-top: 1px solid #37383d;
        }

        .isDelete {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main">
            <div class="select">
                <form action="/like" method="get" id="myform">
                    <select name="selectVal" onchange="submitForm()">
                        <% bannerList.forEach(function(item){ %>
                            <option value="<%= item.name%>">
                                <%= item.name%>
                            </option>
                            <% }) %>
                    </select>
                    <div class="search">
                        <input type="text" name="like">
                        <button class="search-btn">
                            <img src="/images/fangdajing.png" alt="">
                        </button>
                    </div>
                </form>
                <button id="addBtn">添加</button>
            </div>
            <div class="content">
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>图片名称</th>
                            <th>图片路径</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% bannerList.forEach(function(item){ %>
                            <tr>
                                <td>
                                    <%= item.id %>
                                </td>
                                <td>
                                    <%= item.name %>
                                </td>
                                <td>
                                    <%= item.imgurl %>
                                </td>
                                <td>
                                    <img src="/images/btn_chakan.png" class="edit update"
                                        data-imgurl="<%= item.imgurl %>">
                                    <img src="/images/btn_shanchu.png" alt="del" class="delete-item"
                                        data-id="<%= item.id %>">
                                </td>
                            </tr>
                            <% }) %>
                    </tbody>
                </table>

                <div class="page">
                    <ul class="pagination">
                        <% var nextNum=10; var prevNum=10; %>
                            <li class="disabled"><a href="javascript:;">共 <%= pager.maxNum %>条</a></li>
                            <li class="disabled"><a href="javascript:;">总<%= pager.pageCount %>页</a></li>
                            <% if(pager.maxNum==0){ %>
                                <li class="disabled"><a href="javascript:;">首页</a></li>
                                <% }else{ %>
                                    <li><a href="/bannerList?page=1">首页</a></li>
                                    <% } %>
                                        <!-- 上一页 -->
                                        <% if(pager.pageCurrent==1){ %>
                                            <li class="disabled"><a href="javascript:;">上一页</a></li>
                                            <% }else{ %>
                                                <li><a
                                                        href="/bannerList?page=<%= parseInt(pager.pageCurrent) - 1 %>">上一页</a>
                                                </li>
                                                <% } %>

                                                    <!-- 循环显示页码 开始-->
                                                    <% for(var i=prevNum; i> 0; i--){ %>
                                                        <% if(parseInt(pager.pageCurrent) - i> 0){ %>
                                                            <li><a
                                                                    href="/bannerList?page=<%= parseInt(pager.pageCurrent) - i %>">
                                                                    <%= parseInt(pager.pageCurrent) - i %>
                                                                </a></li>
                                                            <% }} %>

                                                                <li class="active"><a
                                                                        href="/bannerList?page=<%= pager.pageCurrent %>">
                                                                        <%= pager.pageCurrent %>
                                                                    </a></li>
                                                                <% for(var i=1; i < nextNum; i++){ %>
                                                                    <% if(parseInt(pager.pageCurrent) + i
                                                                        <=pager.pageCount){ %>

                                                                        <li><a
                                                                                href="/bannerList?page=<%= parseInt(pager.pageCurrent) + i %>">
                                                                                <%= parseInt(pager.pageCurrent) + i %>
                                                                            </a></li>

                                                                        <% }} %>
                                                                            <!-- 循环显示页码 结束 -->
                                                                            <!-- 判断下一页开始 -->
                                                                            <% if(pager.pageCurrent==pager.pageCount){
                                                                                %>
                                                                                <li class="disabled"><a
                                                                                        href="javascript:;">下一页</a></li>
                                                                                <% }else{ %>
                                                                                    <li><a
                                                                                            href="/bannerList?page=<%= parseInt(pager.pageCurrent) + 1 %>">下一页</a>
                                                                                    </li>
                                                                                    <% } %>

                                                                                        <!-- 判断尾页 -->
                                                                                        <% if(pager.maxNum==0){ %>
                                                                                            <li class="disabled"><a
                                                                                                    href="javascript:;">尾页</a>
                                                                                            </li>
                                                                                            <% }else{ %>
                                                                                                <li><a
                                                                                                        href="/bannerList?page=<%= pager.pageCount %>">尾页</a>
                                                                                                </li>
                                                                                                <% } %>

                    </ul>
                </div>

            </div>
        </div>
    </div>
    <!-- 添加操作 -->
    <div class="dialog isDialog"></div>
    <div class="dialog-warp isDialog">
        <div class="dialog-header">
            <h3>添加banner图</h3>
            <div class="close">
                <img src="/images/icon_guanbi.png" alt="">
            </div>
            <form action="/addBanner" enctype="multipart/form-data" method="post">
                <div class="">
                    <p>图片名称</p>
                    <p>
                        <input type="text" name="imgName" class="form-control">
                    </p>
                </div>
                <div>
                    <p>图片路径</p>
                    <input type="file" name="pic" class="upload-input" id="uploadInput">
                </div>
                <div class="dialog-footer">
                    <span class="cancel">取消</span>
                    <button class="determine">确定</button>
                </div>
            </form>
        </div>
    </div>
    <!--删除操作  -->
    <div class="dialog isDelete"></div>
    <div class="dialog-warp isDelete">
        <div class="dialog-header">
            <h3>删除banner图</h3>
            <div class="close">
                <img src="/images/icon_guanbi.png" alt="">
            </div>
            <div class="dialog-footer">
                <span class="cancel">取消</span>
                <button class="determine determineDel">确定</button>
            </div>
        </div>
    </div>

    <script src="/javascripts/jquery.js"></script>
    <script>
        // 提交表单
        function submitForm() {
            var form = document.getElementById("myform");
            form.submit();
        }

        $(function () {
            var id = '';
            var updateHtml = '';
            // 显示添加banner图弹窗
            $('#addBtn').click(function () {
                $('.isDialog').show()
            })
            // 关闭弹窗
            $('.close, .cancel').click(function () {
                $('.isDialog').hide()
            })
            //  显示删除弹窗
            $('.delete-item').click(function () {
                id = $(this).data('id');
                $('.isDelete').show()
            })
            // 关闭弹窗 
            $('.close,.cancel').click(function () {
                $(".isDelete").hide();
            })
            // 点击确定删除
            $('.determineDel').click(function () {
                window.location.href = `/del?id=${id}`;
            })

            $('.update').click(function () {
                var updateId = $(this).data('id');
                var updateName = $(this).data('name');
                var updateImgurl = $(this).data('imgurl');

                updateHtml = `
                    <div class="dialog isUpdate"></div>
                    <div class="dialog-warp isUpdate">
                        <div class="dialog-header">
                            <h3>添加banner图</h3>
                            <div class="close">
                                <img src="/images/icon_guanbi.png" alt="">
                            </div>
                            <form action="/addBanner" enctype="multipart/form-data" method="post">
                                <div class="">
                                    <p>Id</p>
                                    <p>
                                        <input type="text" name="upid" class="form-control" value=${updateId}>
                                    </p>
                                    <p>图片名称</p>
                                    <p>
                                        <input type="text" name="imgName" class="form-control" value=${updateName}>
                                    </p>
                                </div>
                                <div>
                                    <p>图片路径</p>
                                    <input type="file" name="pic" class="upload-input" id="uploadInput" >
                                </div>
                                <div class="dialog-footer">
                                    <span class="cancel">取消</span>
                                    <button class="determine">确定</button>
                                </div>
                            </form>
                        </div>
                    </div>
                 `;
                $('body').append(updateHtml);
            })


        })
    </script>

</body>

</html>